<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/style/member.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/page.css">
    <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/c/font_4586065_zr0eqag50cb.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/common.css">
</head>
<body>
<c:import url="header.jsp"></c:import>
<div id="big">
    <div id="box">
        <div id="TopDiv">
            <!-- 顶部 -->
            <label>会员姓名:</label>
            <input type="text" placeholder="请输入会员姓名" class="name">
            <!-- 顶部 -->
            <label>会员卡号:</label>
            <input type="text" placeholder="请输入会员卡号" class="cart_number">
            <!-- 顶部 -->
            <label>累计消费(大于):</label>
            <input type="text" placeholder="请输入金额" class="total_amount">
            <button type="button" class="select_button" onclick="bind()">
                <span>查询</span>
            </button>
            <button type="button" class="add_button" style="float: right;"
                    onclick="location.href='/admin/member/add.jsp'">
                <a href="#">+ 添加会员</a>
            </button>
        </div>
        <!-- 员工姓名 -->
        <div id="Staff_div">
            <table cellspacing="0" class="table" id="tb">
                <thead>
                <tr>
                    <td><strong>会员姓名</strong></td>
                    <td><strong>手机号</strong></td>
                    <td><strong>会员卡号</strong></td>
                    <td><strong>余额</strong></td>
                    <td><strong>累计消费</strong></td>
                    <td><strong>状态</strong></td>
                    <td><strong>注册时间</strong></td>
                    <td><strong>操作</strong></td>
                </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>

        <div class="divpage">

            <span class="sum"></span>
            <select class="pageselect">
                <option>2条/页</option>
                <option>3条/页</option>
                <option>5条/页</option>
                <option>10条/页</option>
            </select>
            <div class="prev" style="display: inline-block">
                <i class="iconfont icon-shangyiyeqianyiye"></i>
            </div>
            <span class="skipPage">
                </span>
            <div class="next" style="display: inline-block">
                <i class="iconfont icon-xiayiyehouyiye"></i>
            </div>
            <span class="leavefor">
                前往
                <input type="text" class="el-input__inner">
                页
                </span>
        </div>
    </div>
</div>
<c:import url="Leftnavigationbar.jsp"></c:import>
<script src="${pageContext.request.contextPath}/js/jquery.js"></script>
<script>
    const page = {
        pageSize: 5,
        page: 1
    }

    $(function () {
        bind()
    })

    let pageCount = 0

    function bind() {
        $.ajax({
            type: 'post',
            url: '/memberQuery?',
            data: {
                page: page.page,
                pageSize: page.pageSize,
                name: $('.name').val(),
                cartNumber: $('.cart_number').val(),
                totalAmount: $('.total_amount').val()
            },
            success: function (data) {
                data = JSON.parse(data)
                if (!data.pageCount) {
                    document.querySelector('#Staff_div').style.display = 'none'
                    return document.querySelector('.divpage').style.display = 'none'
                }
                document.querySelector('#Staff_div').style.display = 'inline-block'
                document.querySelector('.divpage').style.display = 'block'
                // 渲染分页部分
                document.querySelector('.sum').innerHTML = '共 ' + data.pageCount + ' 页'

                document.querySelector('.skipPage').innerHTML = page.page

                document.querySelector('tbody').innerHTML = data.list.map(item => `
                <tr>
                    <td>` + item.name + `</td>
                    <td>` + item.phone + `</td>
                    <td>` + item.cartNumber + `</td>
                    <td>￥` + item.balance + `</td>
                    <td>￥` + item.totalAmount + `</td>
                    <td><p class="` + (item.status === 1 ? "enable" : "disable") + `"></p>` + (item.status === 1 ? "启用" : "禁用") + `</td>
                    <td>` + item.createTime + `</td>
                    <td>
                        <button class="update" onclick="update(` + item.id + `)">修改</button>
                        <button class="forbidden ` + (item.status === 0 ? "statusEnable" : "statusDisable") + `" onclick="updateStatus(` + item.id + `, ` + item.status + `)">` + (item.status === 0 ? "启用" : "禁用") + `</button>
                    </td>
                </tr>`).join('')
                const ops = document.querySelectorAll('.pageselect option');
                for (const op of ops) {
                    if (op.innerHTML.includes(page.pageSize)) op.selected = "selected"
                }
                pageCount = data.pageCount
                if (page.page <= 1) {
                    document.querySelector('.prev').classList.add('pageDisabled')
                } else {
                    document.querySelector('.prev').classList.remove('pageDisabled')
                }
                if (page.page >= pageCount) {
                    document.querySelector('.next').classList.add('pageDisabled')
                } else {
                    document.querySelector('.next').classList.remove('pageDisabled')
                }
                document.querySelector('.el-input__inner').value = page.page
            }
        })
    }

    document.querySelector('.pageselect').addEventListener('change', e => {
        page.page = 1
        page.pageSize = e.target.value.substring(0, e.target.value.indexOf('条'))
        bind()
    })
    document.querySelector('.prev').addEventListener('click', e => {
        if (page.page === 1) return
        document.querySelector('.next').classList.remove('pageDisabled')
        page.page--
        bind()
    })

    document.querySelector('.next').addEventListener('click', e => {
        if (page.page >= pageCount) return
        document.querySelector('.prev').classList.remove('pageDisabled')
        if (page.page === pageCount - 1) {
            document.querySelector('.next').classList.add('pageDisabled')
        }
        page.page++
        bind()
    })
    document.querySelector('.el-input__inner').addEventListener('blur', e => {
        if (e.target.value > pageCount || e.target.value < 1) {
            return
        }
        page.page = e.target.value
        bind()
    })

    function update(id) {
        location.href = 'member/update.jsp?id=' + id;
    }

    const updateStatus = (id, status) => {
        $.ajax({
            type: 'get',
            url: '/memberStatus',
            data: {
                id,
                status: status === 1 ? 0 : 1
            },
            success: function (data) {
                bind()
            }
        })
    }
    document.querySelector('#TopDiv input').addEventListener('mouseenter', e => {
        if (e.target.classList.contains('focus')) return
        e.target.classList.add('hover')
    })
    document.querySelector('#TopDiv input').addEventListener('mouseleave', e => e.target.classList.remove('hover'))

    document.querySelector('#TopDiv input').addEventListener('focus', e => {
        e.target.classList.remove('hover')
        e.target.classList.add('focus')
    })
    document.querySelector('#TopDiv input').addEventListener('blur', e => e.target.classList.remove('focus'))
</script>
</body>
</html>
